<template>
  <div class="container-box">
    <div class="filter-box">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <template v-for="(item, index) in columns.filter(d => d.isFilter)">
          <el-form-item :key="index" :label="item.title">
            <el-input v-model="query[item.key]" :placeholder="`请输入${item.title}`" />
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="list" border>
        <template v-for="(item, index) in columns.filter(d => d.isTable)">
          <el-table-column :key="index" :prop="item.key" :label="item.title">
            <template slot-scope="scope">
              <div v-if="item.key === ''" class="">{{ scope.row[item.key] }}</div>
              <div v-else class="">{{ handleRowResult(item, scope.row) }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { goodsIndex } from '../../api/goods'
export default {
  name: 'Goods',
  data() {
    return {
      columns: [
        { title: '门店', key: 'store_name', type: 'text', isFilter: true, isTable: false },
        { title: '商品名称', key: 'goods_name', type: 'text', isFilter: true, isTable: true },
        { title: '分类名称', key: 'cat_id', type: 'text', isFilter: true, isTable: true },
        { title: '库存', key: 'stock', type: 'text', isFilter: true, isTable: true }
      ],
      list: [],
      query: {}
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await goodsIndex();
      this.list = data?.list || [];
      console.log('this.list==', this.list);
    },
    handleRowResult(item, row) {
      // console.log('handleRowResult--item', item, row);
      if (item.key === 'stock') {
        if (row.stock && row.unit_name2 && row.unit_convert !== row.unit_convert2) {
          const unitNum = row.stock % row.unit_convert2;
          const unitNum2 = Math.floor(row.stock / row.unit_convert2);
          return `${unitNum2}${row.unit_name2}${unitNum}${row.unit_name}`
        }
        return `${row.stock}${row.unit_name}`
      }
      return row[item.key] || '';
    }
  }
}

</script>
<style lang="scss" scoped>
.container-box {
  padding: 20px;
}

.table-box {
  // padding: 20px;
}
</style>
